<template>
  <div
    ref="menu"
    :class="{ show }"
    :style="{
      position: 'absolute',
      width: flagWidth,
      height: flagHeight,
      transform: `translate(${flagPosition.left},${flagPosition.top})`,
      border: '1px solid red',
      zIndex: 10,
    }"
    class="flagBox"
  ></div>
</template>
<script>
export default {
  props: {
    rectConfig: {
      type: Object,
      default: () => ({}),
    },
    show: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    flagWidth() {
      return Math.ceil(this.rectConfig.right - this.rectConfig.left) + "px";
    },
    flagHeight() {
      return Math.ceil(this.rectConfig.bottom - this.rectConfig.top) + "px";
    },
    flagPosition() {
      // Number(window.localStorage.getItem("width")) +
      // "px",
      return {
        top: this.rectConfig.offsetTop + "px",
        left: this.rectConfig.translateLeft + "px",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.flagBox {
  pointer-events: none;
  //visibility: hidden;
  //&.show {
  //  visibility: visible;
  //}
}
</style>
